<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="remainTime" style="font-size:12px;font-weight:600;color:#FF5722"></div>
       <script>
//支付剩余时间倒计时
$(function(orderDate){  //orderDate是订单生效时间，后台的Date类型传到前端成了毫秒
    var now=new Date();
    var end=new Date(orderDate+30*60*1000);  //提交订单的时间+30min就是订单失效时间，后台Date传过来变成了毫秒
 
    /*两个时间相减,得到的是毫秒ms,变成秒*/
    var result=Math.floor(end-now)/1000; //result= 30*60s;
    var interval=setInterval(sub,1000); //定时器 调度对象
    /*封装减1秒的函数*/
    function sub(){
        if (result>1) {
            result = result - 1;
            var second = Math.floor(result % 60);     // 计算秒 ，取余
            var minite = Math.floor((result / 60) % 60); //计算分 ，换算有多少分，取余，余出多少秒
            //var hour = Math.floor(result/1000/60/60%24);  //计算小时，这里最长只有30min，用不着
            //var day = Math.floor(result/1000/60/60/24);   //计算天，这里最长只有30min，用不着
            $("#remainTime").html("支付剩余时间：" + minite + "分" + second + "秒");
        } else{
            //这里可以添加倒计时结束后需要执行的事件
            alert("未在规定时间内支付，订单已失效！");
            window.clearInterval(interval);  
            //TODO 订单失效后的一些列操作：更改订单状态的同时回库存
        }
    };
});
</script>
</body>
</html>